<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style></style>
  </head>
  <body>
    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const width = 800;
      const height = 600;
      const svg = d3
        .select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .style('border', '1px solid #ccc');

      // const g = svg.append('g').attr('transform','translate(400,300)')
      // g.append('circle')
      //   .attr('cx',0)
      //   .attr('cy',0)
      //   .attr('r',100)
      //   .attr('fill','#fac')

      // g.select('circle')
      //   .transition()
      //   .duration(2000)
      //   .delay(1000)
      //   .attr('r',200)
      //   .attr('fill','#acf')

      const data = ['a', 'b', 'c', 'd'];
      const colorScale = d3.scaleOrdinal().domain(data).range(d3.schemeSet3);
      const g = svg.append('g').attr('transform', 'translate(100,100)');

      g.selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx', (d, i) => i * 100 + 50)
        .attr('cy', 50)
        .attr('r', 45)
        .attr('fill', (d) => colorScale(d));

      g.transition()
        .duration(2000)
        .attr('transform', 'translate(100,300)')
        .selectAll('circle')
        .transition(2000)
        .delay((d, i) => i * 1000)
        .attr('fill', (d, i) =>
          i === data.length - 1 ? colorScale(data[0]) : colorScale(data[i + 1])
        );
    </script>
  </body>
</html>

